<template>
	<view>
		<view v-if="certificateList.length === 0" class="no-certificate">
			暂无证书
		</view>
		<scroll-view v-else scroll-y="true" class="certificate-list">
			<view v-for="certificate in certificateList" :key="certificate.id" class="certificate-item"
				@click="goToDetails(certificate.id)" style="margin-bottom: 15px">
				<!-- 左侧证书照片 -->

				<image :src="getFirstImageUrl(certificate.certificateUrls)" mode="aspectFill"
					class="certificate-photo" />

				<!-- 右侧证书信息 -->
				<view class="certificate-info">
					<view class="first-row">
						<text class="certificate-type">{{
              certificate.certificateTypeName
            }}</text>
						<view class="certificate-name">{{
              truncatedName(certificate.certificateName)
            }}</view>
					</view>
					<view class="second-row">
						<text class="certificate-code">证书编号: {{ certificate.code }}</text>
					</view>
					<view class="third-row">
						<text class="certificate-date">取得时间: {{ certificate.getDate }}</text>
						<text class="file-count">文件数: {{ fileCount(certificate.certificateUrls) }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import isHaveBug from "../../../utils/bug";
import {
		certificateList
	} from "@/api/work/certificate";
	export default {
		data() {
			return {
				isShowAllName:true,
				certificateList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 1000,
					params: {
						startDate: "",
						endDate: "",
					},
					certificateType: null, // 改为索引值
				},
				certificateTypes: ["学历证", "学位证"],
			};
		},
		mounted() {
			this.fetchSalaryData();
		},
		onLoad() {
			if(isHaveBug("HR-APP-017")){
				this.isShowAllName = false
			}
		},
		methods: {
			goToDetails(id) {
				uni.navigateTo({
					url: `/pages/work/certificateDetails/certificateDetails?id=${id}`,
				});
			},
			handleCertificateTypeChange(e) {
				this.queryParams.certificateType = e.detail.value; // 保存索引值
			},
			certificateTypeText(type) {
				return this.certificateTypes[type] || "";
			},
			fileCount(certificateUrls){
				let files = certificateUrls.split(",");
				return files.length
			},
			fetchSalaryData() {
				certificateList(this.queryParams)
					.then((response) => {
						this.certificateList = response.rows;
						console.log(response.rows);
					})
					.catch((error) => {
						console.error("Error fetching salary data:", error);
					});
			},
			truncatedName(name) {
				if (this.isShowAllName){
					return name.length > 10 ? name.slice(0, 10) + "..." : name;
				}else{
					return name.slice(0, 10);
				}
			},
			getFirstImageUrl(certificateUrls) {
				function getBaseUrl() {
					const serverIp = uni.getStorageSync("serverIp") || "localhost";
					const serverPort = uni.getStorageSync("serverPort") || "8182";
					return `http://${serverIp}:${serverPort}`;
				}
				const baseUrl = getBaseUrl();
				return baseUrl + certificateUrls.split(",")[0];
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: `/pages/work/sx/sx?startDate=${this.queryParams.params.startDate}&endDate=${this.queryParams.params.endDate}`,
				events: {
					timeScreen: (startDate, endDate) => {
						this.queryParams.params.startDate = startDate;
						this.queryParams.params.endDate = endDate;
						this.fetchSalaryData();
					}
				}
			});
		}
	};
</script>

<style scoped>
	.no-certificate {
		text-align: center;
		font-size: 18px;
		color: #888;
		padding: 20px;
	}

	.certificate-item {
		display: flex;
		align-items: center;
		margin: 20rpx 15px 0rpx;
		padding: 10px;
		border-radius: 8px;
		background-color: white;
		box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
	}

	.certificate-photo {
		width: 80px;
		height: 80px;
		border-radius: 8px;
		background-color: #e0e0e0;
		object-fit: cover;
		margin-right: 10px;
	}

	.certificate-info {
		flex: 1;
	}

	.first-row,
	.second-row,
	.third-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.certificate-type {
		font-weight: bold;
		color: #333;
	}

	.certificate-name {
		color: #555;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.certificate-code,
	.certificate-date,
	.file-count {
		color: #777;
	}
</style>